<template>
    <div id="kline_3" style="width: 100%; height: 100%; padding-top: 15px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { backData } from "@/api/msg"
export default {
    data(){
        return {
            option: {
                colorBy: "series",
                color: ["#5B8FF9", "#69DBAE", "#5070dd", "#b6d634", "#505372", "#ff994d", "#0ca8df", "#ffd10a", "#fb628b", "#785db0", "#3fbe95" ],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: 0,
                    left: 'center'
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: true,
                            width: 1 ,
                            showAbove: true,
                            length: 50,
                            length2: 20,
                            lineStyle: {
                                type: 'solid',
                                color: '#000'
                            },  
                        },
                        label:{            //饼图图形上的文本标签
                            normal:{
                                show: false,
                                position:'center', //标签的位置
                                textStyle : {
                                    fontWeight : 600 ,
                                    fontSize : 16    //文字的字体大小
                                },
                                formatter:'{d}%'
                                
                            }
                        },

                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        data: [
                            { value: 1048, name: '新用户' },
                            { value: 735, name: '老用户' },
                        ]
                    },
                ]
            },
            
        }
    },
    methods: {
        initCharts(){
            backData({}).then(res=>{
                this.option.series[0].data = [
                    {
                        value: res.newUser,
                        name: '新用户'
                    },
                    {
                        value: res.oldUser,
                        name: '老用户'
                    },
                ]
                var chartDom = document.getElementById('kline_3');
                var myChart = echarts.init(chartDom);
                myChart.setOption(this.option)
            })    
        }
    }

}
</script>

<style lang="scss">
   
</style>